<template>
    <span class="avatar-content">
      <span v-if="status !=null" class="status" :class="['status-'+status]" :style="{right:0.293*width -10 +'px',top:0.293*width -10 +'px'}"></span>
      <img class="avatar-img" :style="{width:width+'px',height:width+'px'}" v-if="imgUrl" :src="imgUrl">
      <span v-if="!imgUrl" class="avatar-name" :style="{width:width+'px',height:width+'px',lineHeight:width+'px',backgroundColor:bgColor,fontSize:fontSize+'px'}">{{name.charAt(0).toUpperCase()}}</span>
    </span>
</template>

<script>
    export default {
      name: 'avatar',
      props:{
        width:{
          type:Number,
          default:40
        },
        imgUrl:{
          type:String,
          default:''
        },
        name:{
          type:String,
          default:''
        },
        fontSize:{
          type:String,
          default:'no'
        },
        status:{

        }
      },
      computed:{
        bgColor(){
          var color ={A:'#F8C69F',B:'#348fff',C:'#A3D572',D:'#FF8C69',E:'#f08913',F:'#ff34c6',G:'#FF8C69',H:'#418570',I:'#563f28',J:'#FF8C69',K:'#9843ff',L:'#348fff',M:'#FF8C69',N:'#348fff',O:'#ff5359',P:'#561721',Q:'#2c5685',R:'#0d1256',S:'#b45bff',T:'#6512ff',U:'#ff0337',V:'#348fff',W:'#FF8C69',X:'#c161ff',Y:'#405635',Z:'#a52bc0'};
          if(this.name){
            return  color[this.name.charAt(0).toUpperCase()];
          }
          return color['A'];
        }
      },
      watch:{

      },
      created(){

      },
      data () {
        return {

        }
      },
      methods:{

      }
    }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
    @import "src/assets/css/variable.scss";

    .avatar-content {
      position: relative;
      text-align: center;
      display: inline-block;
      line-height: 1px;
      .status{
        position: absolute;
        right: -1px;
        top: 12px;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        &.status-0{
          background-color: rgb(204, 204, 204);
        }
        &.status-2{

          background-color: rgb(254, 100, 0);
        }
        &.status-1{
          background-color: rgb(0, 204, 0);
        }
      }
      .avatar-img {
        border-radius: 50%;
        vertical-align: middle;
      }
      .avatar-name {
        display: inline-block;
        line-height: 57px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        color: #fff;
        background-color: #A3D572;
      }
    }
</style>
